import {
  memo,
  useCallback,
  useContext,
  useEffect,
  Fragment,
  useState,
} from "react";
import type { FormProps } from "antd";
import {
  Form,
  Row,
  Col,
  Input,
  Card,
  Select,
  Typography,
  InputNumber,
  Switch,
  Table,
} from "antd";

import styles from "./index.module.scss";

import { dateFormatList, photoScale } from "../../config/option";
import indexContext from "../../context";
import { storageSetItem } from "../../utils/storage";
import photoSizeTable from "../../config/photoSizeTable";
import UploadImg from "../UploadImg";
const { Title, Paragraph, Text } = Typography;
const { Column } = Table;

type FieldType = {};

function GlobalForm() {
  const { globalConfig, setGlobalConfig } = useContext(indexContext);
  const [show, setShow] = useState(false);
  const [form] = Form.useForm<FieldType>();

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
  };

  const onValuesChange = useCallback(
    (changedValues: any, values: FieldType) => {
      setGlobalConfig((oldVal) => {
        const newData = {
          ...oldVal,
          ...values,
        };
        storageSetItem("globalConfig", newData);
        return newData;
      });
    },
    [setGlobalConfig]
  );

  useEffect(() => {
    if (show) return;
    form.setFieldsValue({ ...globalConfig });
    setShow(true);
  }, [form, globalConfig, show]);

  return (
    <div className={styles.content}>
      <Card title="全局设置" className={styles.formBoxCard}>
        <Form
          className={styles.form}
          onFinish={onFinish}
          onValuesChange={onValuesChange}
          variant="filled"
          form={form}
        >
          <Card title="相纸设置" size="small" className={styles.formItemCard}>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item<FieldType> label="比例" name="scale">
                  <Select options={photoScale} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item<FieldType> label="边框" name="padding">
                  <InputNumber
                    style={{ width: "100%" }}
                    type="number"
                    controls={false}
                    min={0}
                    max={100}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Card>
          {show && (
            <Card title="水印设置" size="small" className={styles.formItemCard}>
              <Form.Item<FieldType> label="添加水印" name="isSign">
                <Switch />
              </Form.Item>
              {form.getFieldValue("isSign") && (
                <Fragment>
                  <Form.Item<FieldType> label="默认地址" name="address">
                    <Input />
                  </Form.Item>
                  <Form.Item<FieldType> label="日期格式" name="dateFormat">
                    <Select options={dateFormatList} />
                  </Form.Item>
                  <Form.Item<FieldType> label="自定logo" name="customLogo">
                    <UploadImg size={300} />
                  </Form.Item>
                </Fragment>
              )}
            </Card>
          )}
        </Form>
      </Card>
      <Card className={styles.infoBoxCard}>
        <Typography>
          <Title level={4} style={{ marginTop: 0 }}>
            操作注意事项
          </Title>
          <Paragraph>
            <ul>
              <li>鼠标可以拖动图片选择区域</li>
            </ul>
            <ul>
              <li>单次最多处理{globalConfig.maxPhotos}张图片</li>
            </ul>
            <ul>
              <li>全局设置会应用到每张图片</li>
            </ul>
            <ul>
              <li>
                操作图片设置后需要<strong>重新绘制</strong>
              </li>
            </ul>
          </Paragraph>

          <Title level={4}>快捷键说明</Title>
          <Paragraph>
            <ul>
              <li>
                <Text keyboard>↑</Text>
                <Text keyboard>↓</Text>
                <Text keyboard>←</Text>
                <Text keyboard>→</Text> 图片移动
              </li>
              <li>
                <Text keyboard>+</Text>
                <Text keyboard>-</Text> 图片放大缩小
              </li>
            </ul>
          </Paragraph>

          <Title level={4}>照片常见照片尺寸（英尺）</Title>
          <Paragraph>
            <Table
              pagination={false}
              dataSource={photoSizeTable}
              size="small"
              style={{ width: 330 }}
              bordered
              rowKey="size"
            >
              <Column
                title="尺寸"
                key="size"
                dataIndex="size"
                width={125}
                align="center"
              />
              <Column
                title="比例"
                key="scale"
                dataIndex="scale"
                width={80}
                align="center"
              />
              <Column
                title="大小"
                key="cm"
                dataIndex="cm"
                width={125}
                align="center"
              />
            </Table>
          </Paragraph>

          {/* <Paragraph>
            <blockquote>xxx</blockquote>
            <pre>xxx</pre>
          </Paragraph> */}
        </Typography>
      </Card>
    </div>
  );
}

export default memo(GlobalForm);
